import { BasicComponent } from './basic/basic.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { DisabledComponent } from './disabled/disabled.component';
import { Demo5Component } from './demo5/demo5.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';

export const MultiAutocompleteConfig = {
  location: 'MultiAutocomplete',
  description: '联想输入控件。',
  description_en: '',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/multi-autocomplete/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic use',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic use.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/multi-autocomplete/demo2/demo2.component',
      demoTitle: '自定义模板',
      demoTitle_en: 'Custom Template',
      demoDescription: '自定义模板。',
      demoDescription_en: 'Custom template.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/multi-autocomplete/demo3/demo3.component',
      demoTitle: '新增选项',
      demoTitle_en: 'New Items',
      demoDescription: '添加直接输入的值(非联想出来)。',
      demoDescription_en: 'Directly entered values can be added.',
    },
    {
      demo: DisabledComponent,
      codePath: 'showcase/multi-autocomplete/disabled/disabled.component',
      demoTitle: '禁用',
      demoTitle_en: 'Disable',
      demoDescription: '禁用组件，不可使用。',
      demoDescription_en: 'Disable components and cannot be used.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/multi-autocomplete/demo5/demo5.component',
      demoTitle: '手动调整高度',
      demoTitle_en: 'Adjusting the height manually',
      demoDescription: '拖动下边框调整输入框高度。',
      demoDescription_en: 'Drag the bottom border to adjust the height of the text box.',
    },
    {
      demo: VirtualScrollComponent,
      codePath: 'showcase/multi-autocomplete/virtual-scroll/virtual-scroll.component',
      demoTitle: '虚拟滚动',
      demoTitle_en: 'Virtual scroll',
      demoDescription: '滚动到底部追加数据',
      demoDescription_en: 'Scroll to the bottom to append data',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-multi-autocomplete',
  snippet: `
    <lv-multi-autocomplete></lv-multi-autocomplete>
    `,
  api: [
    {
      attribute: 'lvData',
      type: 'string[] | MultiAutocompleteItem[]',
      default: '[]',
      description: `自动完成的数据源，当类型为 MultiAutocompleteItem[] 时，AutocompleteItem 必须包含一个 value:string 字段，作为填充的值。`,
      description_en: `Data source that is automatically completed. When the type is MultiAutocompleteItem[], MultiAutocompleteItem must contain a [value:string] field as the input value.`,
    },
    {
      attribute: 'lvPlaceholder',
      type: 'string',
      default: '--',
      description: '选择框默认文字',
      description_en: 'Select box default text.',
    },
    {
      attribute: 'lvTagTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `自定义 tag 模板。`,
      description_en: `Customised Tag template.`,
    },
    {
      attribute: 'lvLabelTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `下拉选项的 label 自定义模板，该模板对所有选项项有效。`,
      description_en: `Customised Label template of the autocomplete item, which is valid for all items.`,
    },
    {
      attribute: 'lvPosition',
      type: 'topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight',
      default: 'bottomLeft',
      description: `基于触发点的位置 ('topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight')，默认为触发点的左下方。`,
      description_en: `The autocomplete panel is based on the location of trigger points ('topleft ' | 'topcenter' | 'topright ' | 'bottomleft' | 'bottomcenter ' | 'bottomright'), and it is located at the bottom-left of the trigger point. `,
    },
    {
      attribute: 'lvLoading',
      type: 'boolean',
      default: 'false',
      description: `加载状态，在数据源为异步数据时，配合使用。`,
      description_en: `Loading status. This parameter is used when the data source is asynchronous data.`,
    },
    {
      attribute: 'lvShowNoData',
      type: 'boolean',
      default: 'true',
      description: `是否显示无数据视图。`,
      description_en: `Whether to display no data view.`,
    },
    {
      attribute: 'lvNoDataTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `无数据视图模板。`,
      description_en: `No data view template.`,
    },
    {
      attribute: 'lvAllowNewItem',
      type: 'boolean',
      default: 'false',
      description: `允许添加直接输入的值(非联想出来)。`,
      description_en: `Directly entered values can be added.`,
    },
    {
      attribute: 'lvMaxHeight',
      type: 'string | number',
      default: '2rem',
      description: `组件最大高度，值为 'none' 时，无最大高度`,
      description_en: `Customizing the style maxHeight of the component.`,
    },
    {
      attribute: 'lvMaxLength',
      type: 'number',
      default: '',
      description: '允许输入的最大字符数，默认无限制。',
      description_en: 'The maximum number of characters allowed to be entered, no limit by default.',
      global: true,
    },
    {
      attribute: 'lvResize',
      type: 'boolean',
      default: 'false',
      description: `是否手动调整高度，启用当前属性时lvMaxheight属性失效。`,
      description_en: `Indicates whether to manually adjust the height. The lvMaxheight attribute is invalid when the current attribute is enabled.`,
    },
    {
      attribute: 'lvPanelWidth',
      type: 'string | number',
      default: '--',
      description: `下拉面板的宽度，默认自适应输入框的宽度。`,
      description_en: `Width of the autocomplete panel, which is adaptive to the width of the text box by default.`,
    },
    {
      attribute: 'lvPanelClass',
      type: 'string',
      default: '--',
      description: `自定义下拉面板的样式类。`,
      description_en: `Customizing the style class of the panel.`,
    },
    {
      attribute: 'lvBeforeValueChange',
      type: 'fn()',
      default: '--',
      description: `输入/选择前的回调函数，支持可执行函数、Promise、Observe，返回值为false可阻止输入。`,
      description_en: `Callback function before input/select a value item. Supports executable functions, Promise and Observe. If the returned value is false, input/select can be prevented.`,
    },
    {
      attribute: 'lvScroll',
      type: '{ y?: string }',
      default: '{y: 288px}',
      description: '下拉选项最大高度，超过出滚动，请配置单个选项高度的整数倍',
      description_en: 'Drop-down option maximum height, over scrolling.Set this parameter to an integer multiple of the height of a single option.',
    },
    {
      attribute: 'lvVirtualScroll',
      type: 'boolean',
      default: 'false',
      description: '是否使用虚拟滚动（大数据场景使用）',
      description_en: 'Whether to use virtual scrolling (used in big data scenes).'
    },
    {
      attribute: 'lvVirtualItemSize',
      type: 'number',
      default: '32',
      description: '每行高度。lvSize为large时，默认值为40；lvSize为default时，默认值为32；lvSize为small时，默认值为24。',
      description_en: `The height of each row. When lvSize is large, the default value is 40; when lvSize is default, the default value is 32; when lvSize is small, the default value is 24.`,
    },
    {
      attribute: 'lvVirtualMaxBuffer',
      type: 'number',
      default: '200',
      description: '渲染新项时最大缓冲高度',
      description_en: 'Maximum buffer height when rendering new items.'
    },
    {
      attribute: 'lvVirtualMinBuffer',
      type: 'number',
      default: '100',
      description: '缓冲区最小像素高度',
      description_en: 'Minimum pixel height of buffer',
    },
    {
      attribute: 'lvTrackBy',
      type: 'fn',
      default: '',
      description: '内容列表trackBy',
      description_en: 'Content list trackBy.'
    },
  ],
  event: [
    {
      event: 'ngModelChange',
      parameter: ``,
      description: '已输入项变化回调。',
      description_en: 'Input Item Change Callback.',
    },
    {
      event: 'lvInputChange',
      parameter: `value`,
      description: '文本框手动输入时的回调函数。',
      description_en: `Callback function used when a text box is entered manually.`,
    },
    {
      event: 'lvScrollEnd',
      parameter: ``,
      description: '虚拟滚动到底部时回调事件。若配置了lvScroll，请配置单个选项高度的整数倍',
      description_en: 'Callback event when virtual scrolling to the bottom.If lvScroll is configured, set this parameter to an integer multiple of the height of a single option.',
    },
    {
      event: 'lvScrollingChange',
      parameter: ``,
      description: '虚拟滚动中回调事件',
      description_en: 'Virtual scrolling callback event.'
    }
  ],
};
